body {
  margin: 0;
}
ul {
  padding-inline-start: 15px;
  cursor: pointer;
}
.dark {
  background-color: #333;
}
.dark header {
  height: 55px;
  line-height: 55px;
  position: relative;
  cursor: pointer;
}
@keyframes showFloatBar {
  from {
    top: -55px;
  }
  to {
    top: 0px;
  }
}
@keyframes hideFloatBar {
  from {
    top: 0px;
  }
  to {
    top: -55px;
  }
}
.dark .headerFloatBar {
  position: fixed;
  background-color: #333;
  /* top: -55px; */
}
.dark .showHeaderFloatBar {
  animation: showFloatBar 0.5s linear 0s;
}
.dark .hideHeaderFloatBar {
  animation: hideFloatBar 0.5s linear 0s;
}
.dark #siteName {
  font-size: 24px;
  color: #ababab;
  padding-left: 20px;
  padding-right: 10px;
}
.dark #siteName:hover {
  color: #f4e3ab;
}
.dark .sizeBtn {
  color: #ababab;
  vertical-align: top;
}
.dark .sizeBtn:hover {
  color: #e66201;
}
.dark .separator {
  padding: 0 5px;
  color: #ababab;
  vertical-align: top;
}
.dark #title {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  color: #ababab;
}
.dark #title:hover {
  color: #e66201;
}
.dark #directoryUl {
  color: #ababab;
}
.dark #directoryUl li span:hover {
  color: #e66201;
}
.dark #content {
  position: absolute;
  top: 55px;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
}
.dark footer {
  position: fixed;
  bottom: 0px;
  height: 44px;
  padding-left: 20px;
  width: 100%;
  color: #ababab;
  cursor: pointer;
}
.dark .footerFloatBar {
  bottom: -44px;
}
.light {
  background-color: #edecea;
}
.light header {
  height: 55px;
  line-height: 55px;
  position: relative;
  cursor: pointer;
}
@keyframes showFloatBar {
  from {
    top: -55px;
  }
  to {
    top: 0px;
  }
}
@keyframes hideFloatBar {
  from {
    top: 0px;
  }
  to {
    top: -55px;
  }
}
.light .headerFloatBar {
  position: fixed;
  background-color: #f0f0f0;
  top: -55px;
}
.light .showHeaderFloatBar {
  animation: showFloatBar 0.5s linear 0s;
}
.light .hideHeaderFloatBar {
  animation: hideFloatBar 0.5s linear 0s;
}
.light #siteName {
  font-size: 24px;
  color: black;
  padding-left: 20px;
  padding-right: 10px;
}
.light #siteName:hover {
  color: #f4e3ab;
}
.light .sizeBtn {
  color: black;
  vertical-align: top;
}
.light .sizeBtn:hover {
  color: #e66201;
}
.light .separator {
  padding: 0 5px;
  color: black;
  vertical-align: top;
}
.light #title {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  color: black;
}
.light #title:hover {
  color: #e66201;
}
.light #directoryUl {
  color: black;
}
.light #directoryUl li span:hover {
  color: #e66201;
}
.light #content {
  position: absolute;
  top: 55px;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
}
.light footer {
  position: fixed;
  bottom: 0px;
  height: 44px;
  padding-left: 20px;
  width: 100%;
  color: black;
  cursor: pointer;
}
.light .footerFloatBar {
  bottom: -44px;
}
h2 {
  margin: 10px 0;
}
#imgBox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  height: fit-content;
  justify-content: center;
}
.img {
  position: relative;
  width: 50%;
  height: auto;
  margin: 5px;
}
#bigImgBox {
  background-color: rgba(0, 0, 0, 0.5);
  /* 背景颜色为半透明的黑色 */
  position: fixed;
  /* 固定位置，不随页面滚动而移动 */
  z-index: 98;
  /* 设置极高的z-index值，确保蒙层覆盖在其他内容之上 */
  top: 0;
  /* 顶部位置为0 */
  bottom: 0;
  /* 底部位置为0 */
  left: 0;
  /* 左侧位置为0 */
  right: 0;
  /* 右侧位置为0 */
  display: none;
  justify-content: center;
  /* 水平居中对齐内容 */
  align-items: center;
  /* 垂直居中对齐内容 */
}
#bigImg {
  width: 800px;
  z-index: 99;
}
#directory {
  width: 280px;
  height: calc(100% - 54px);
  position: relative;
  overflow-y: scroll;
}
#picViewArea {
  width: calc(100% - 280px);
  height: 100%;
  overflow-y: scroll;
}
#switch {
  position: fixed;
  left: 190px;
  bottom: 10px;
  background-color: white;
  border: 1px solid gray;
  border-radius: 100%;
  display: flex;
  align-items: center;
  width: 28px;
  height: 28px;
}
/* 整体滚动条样式 */
::-webkit-scrollbar {
  width: 5px;
  /* 滚动条的宽度 */
}
/* 滚动条轨道样式 */
::-webkit-scrollbar-track {
  background: #f1f1f1;
  /* 轨道颜色 */
  border-radius: 10px;
}
/* 滚动条滑块样式 */
::-webkit-scrollbar-thumb {
  background: #888;
  /* 滑块颜色 */
  border-radius: 10px;
  /* 滑块圆角 */
}
/* 鼠标悬停在滑块上时的样式 */
::-webkit-scrollbar-thumb:hover {
  background: #555;
  /* 鼠标悬停时的滑块颜色 */
}
